<template>
  <div class="app-main-container">
    <div class="df_ac mb20">
      <span
        class="pointer"
        @click="routerPush('/application/applicationCenter')"
      >{{ $t('message.yyzx') }}</span>
      <i class="ml10 mr10 el-icon-arrow-right" />
      <span class="pointer">{{ $t('message.dxfj') }}</span>
    </div>
    <div class="title_warnning mb20">
      <i
        class="el-icon-warning-outline mr10"
      />{{ $t('message.xdxrqffyhj') }}
    </div>

    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearFilters"
    />
    <el-button
      type="primary"
      class="mb20"
      @click="handleEdit()"
    >{{ $t('message.dxfj') }}</el-button>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="$t('message.fjsj')"
        prop="agTime"
        min-width="160"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.hyrq')"
        prop="receptionName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.yhj')"
        prop="grantName"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.fbzt')"
        prop="status"
        min-width="80"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span v-if="scope.row.status == '0'">{{ $t('message.fsz') }}</span>
          <span v-if="scope.row.status == '1'">{{ $t('message.fscg') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.ffrc')"
        prop="num"
        min-width="80"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.ysyrc')"
        prop="useNum"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.czr')"
        prop="creator"
        min-width="80"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.caozuo')"
        prop="name"
        width="170"
        fixed="right"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-preventReClick
              type="text"
              @click="handleRecord(scope.row)"
            >{{ $t('message.fjjl') }}</el-button>
            <el-button
              v-preventReClick
              type="text"
              @click="handleSms(scope.row)"
            >{{ $t('message.qfdx') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <Paginations
        :total="totalCount"
        :page="pagination.page"
        @current-change="getList"
        @SizeChange="handleSizeChange"
      />
    </div>
    <DirectedCoupon
      v-if="isShowCoupon"
      ref="DirectedCouponRef"
      @close="isShowCoupon = false"
      @openPortrayal="openPortrayal"
      @success="getList()"
    />
    <MassTexting
      v-if="isShowSms"
      ref="MassTextingRef"
      @close="isShowSms = false"
      @success="getList()"
    />
    <Record v-if="isShowRecord" ref="RecordRef" @close="isShowRecord = false" />
  </div>
</template>

<script>
import {
  couponDirectedList
} from '@/api'
import DirectedCoupon from '@/views/application/portrayal/components/PortrayalMem/DirectedCoupon'
import Record from './record'
import MassTexting from './MassTexting.vue'
export default {
  components: {
    DirectedCoupon,
    Record,
    MassTexting
  },
  data() {
    return {
      queryFormConfig: {
        formItems: [
          {
            filed: 'selTime',
            type: 'datetimerange',
            label: this.$t('message.fjsj')
          }
        ],
        online: true
      },
      pagination: {
        page: 1,
        rows: 10
      },
      list: [],
      totalCount: 0,
      listLoading: false,
      meta: [],
      filters: {},

      isShowCoupon: false,
      isShowRecord: false,
      isShowSms: false
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
    if (this.$route.query.renovate && this.$route.query.renovate === '1') {
      this.getList()
    }
  },
  methods: {
    changeSend(row) {

    },
    handleSms(row) {
      this.isShowSms = true
      this.$nextTick(() => {
        this.$refs.MassTextingRef.isShowModal = true
        this.$refs.MassTextingRef.param = {
          ...row, agcId: row.id, sendType: '1',
          templateFlag: '0'
        }
      })
    },
    openPortrayal() { },
    handleRecord(row) {
      this.isShowRecord = true
      this.$nextTick(() => {
        this.$refs.RecordRef.agcId = row.id
        this.$refs.RecordRef.isShowModal = true
        this.$refs.RecordRef.getList(1)
      })
    },
    handleEdit(row) {
      this.isShowCoupon = true
      this.$nextTick(() => {
        this.$refs.DirectedCouponRef.isShowModal = true
      })
    },
    getList(page) {
      const { pagination, filters: param } = this
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      if (param.selTime && param.selTime.length > 0) {
        param.startTime = param.selTime[0]
        param.endTime = param.selTime[1]
      } else {
        param.startTime = null
        param.endTime = null
      }
      this.listLoading = true
      couponDirectedList({
        pagination,
        param
      }).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.totalCount = res.totalCount
          this.list = res.recordList
        }
      }).catch(err => {
        this.listLoading = false
        console.log('-----', err)
      })
    },
    routerPush(path) {
      this.$router.push(path)
    },
    handleSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    },
    // 清空筛选项
    clearFilters() {
      this.filters = {}
      this.getList(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.title_warnning {
  height: 36px;
  line-height: 36px;
  background: #f0f3fa;
  border-radius: 2px;
  color: #435ebe;
  padding-left: 20px;
}
.title_warnning {
  height: 36px;
  line-height: 36px;
  background: #f0f3fa;
  border-radius: 2px;
  color: #435ebe;
  padding-left: 20px;
}
</style>
